<template>
  <div class="list">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="站点名称">
          <el-input v-model="formInline.regionName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: right;align-items: center;">
          <el-button size="small" @click="showAddDetail">新加站点</el-button>
        </div>

      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="regionName" label="站点名称">
        </el-table-column>
        <el-table-column prop="regionPhone" label="应急救援电话">
        </el-table-column>
        <el-table-column prop="regionRemark" label="分工情况说明">
        </el-table-column>
        <el-table-column prop="regionWorkerNum" label="站点人数">
        </el-table-column>
        <el-table-column prop="maintEleNum" label="承保电梯数">
        </el-table-column>
        <el-table-column prop="workerFirstName" label="负责人">
        </el-table-column>
        <el-table-column prop="workerFirstPhonenumber" label="负责人电话">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="showEditDetail(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="getDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" v-if="dialogVisible">
      <div class="left">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="站点名称" label-width="100px" prop="regionName">
            <el-input v-model="form.regionName" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="应急救援电话" label-width="100px" prop="regionPhone">
            <el-input v-model="form.regionPhone" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="分工情况说明" label-width="100px" prop="regionRemark">
            <el-input v-model="form.regionRemark" autocomplete="off" size='small'></el-input>
          </el-form-item>
          <el-form-item label="站点位置" prop="address" label-width="100px">
            <el-autocomplete v-model="form.address" size="small" :fetch-suggestions="querySearch" placeholder="请输入详细地址" style="width: 300px"
              :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <baidu-map class="map" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" @ready="handlerBMap" @click="getClickInfo" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addSave('form')" type="primary" v-if="title == '新增站点'">保存</el-button>
        <el-button @click="editSave('form')" type="primary" v-if="title == '编辑站点'">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { selectMaintRegionList, getaddMaintRegion, geteditMaintRegion, getremoveMaintRegion } from '@/api/scheme'
import {
  validatePhoneTwo,
} from "@/utils/validate"
export default {
  components: {

  },
  data () {
    // 联系电话验证
    const validPhoneNo = (rule, value, callback) => {
      if (value) {
        if (!validatePhoneTwo(value)) {
          callback(new Error('请输入正确的应急救援电话'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      rules: {
        regionName: [
          { required: true, message: '请输入维保模板', trigger: 'blur' }
        ],
        regionPhone: [
          { required: true, message: '请输入应急救援电话', trigger: 'blur' },
          { required: true, validator: validPhoneNo, trigger: "blur" },
        ],
        regionRemark: [
          { required: true, message: '请输入分工情况说明', trigger: 'blur' }
        ],
        address: [{
          required: true, message: '请输入站点位置', trigger: 'blur'
        }]
      },
      mapZoom: 15,
      mapCenter: { lng: 0, lat: 0 },
      title: '',
      formLabelWidth: '120px',
      form: {
        address: undefined,
        regionLocation: undefined
      },
      dialogVisible: false,
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      tableData: []
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    getClickInfo (e) {
      this.map.clearOverlays()
      this.mapCenter.lng = e.point.lng
      this.mapCenter.lat = e.point.lat
      var point = new BMap.Point(this.mapCenter.lng, this.mapCenter.lat) // 用于描述地图上点的经纬度。
      var marker = new BMap.Marker(point) // 创建标注
      // console.log('marker----', marker)
      this.map.addOverlay(marker) // 将标注添加到地图中
      var geocoder = new this.BMap.Geocoder()
      geocoder.getLocation(e.point, rs => {
        this.form.address = rs.address
      })
    },
    handlerBMap ({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      console.log(this.form)
      if (this.form.regionLocation) {
        let lng = this.form.regionLocation.split(',')[0]
        let lat = this.form.regionLocation.split(',')[1]
        this.mapCenter.lng = lng
        this.mapCenter.lat = lat
        this.mapZoom = 15
        var point = new BMap.Point(this.mapCenter.lng, this.mapCenter.lat)
        map.addOverlay(new this.BMap.Marker(point))
        var geocoder = new this.BMap.Geocoder()
        geocoder.getLocation(point, rs => {
          this.form.address = rs.address
        })
      } else {
        this.mapCenter.lng = 111.29254921035
        this.mapCenter.lat = 30.697446484492
        this.mapZoom = 10
      }
    },
    querySearch (queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function (point) {
        if (point) {
          that.form.regionLocation = point
          that.makerCenter(point)
        } else {
          that.form.regionLocation = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point }
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    handleSelect (item) {
      var { point } = item
      this.form.regionLocation = point
      this.makerCenter(point)
    },
    makerCenter (point) {
      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 15
      }
    },
    // 获取表格数据
    gettableData () {
      const query = {
        regionNo: this.formInline.regionNo,
        regionName: this.formInline.regionName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      selectMaintRegionList(query).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    //新增站点
    addSave (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let regionLocation = `${this.mapCenter.lng},${this.mapCenter.lat}`
          const query = {
            regionName: this.form.regionName,
            regionPhone: this.form.regionPhone,
            regionRemark: this.form.regionRemark,
            regionLocation: regionLocation
          }
          getaddMaintRegion(query).then(res => {
            console.log(res)
            if (res.data.code == '200') {
              this.handleClose()
              this.gettableData()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //修改站点
    editSave (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let regionLocation = `${this.mapCenter.lng},${this.mapCenter.lat}`
          const query = {
            id: this.form.id,
            regionName: this.form.regionName,
            regionPhone: this.form.regionPhone,
            regionRemark: this.form.regionRemark,
            regionLocation: regionLocation
          }
          geteditMaintRegion(query).then(res => {
            console.log(res)
            if (res.data.code == '200') {
              this.handleClose()
              this.gettableData()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除站点
    getDelete (id) {
      this.$confirm('是否确认删除选中的站点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          id: id
        }
        getremoveMaintRegion(params).then(res => {
          if (res.data.code == '200') {
            this.gettableData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭弹框
    handleClose () {
      this.$refs.form.resetFields()
      this.form = {
        address: undefined,
        regionLocation: undefined
      }
      this.dialogVisible = false
    },
    // 展示弹框
    showAddDetail () {
      this.title = '新增站点'
      this.dialogVisible = true
    },
    showEditDetail (rows) {
      const params = JSON.parse(JSON.stringify(rows))
      params.address = undefined
      this.form = params
      this.title = '编辑站点'
      this.dialogVisible = true
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
    },
    onSubmit () {
      console.log('submit!')
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
.list {
  .clearfix {
    font-weight: bold;
  }
  .el-input {
    width: 300px;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      display: flex;
      .left {
        width: 50%;
      }
      .right {
        width: 50%;
        .map {
          width: 100%;
          height: 100%;
          ::v-deep .BMap_cpyCtrl {
            display: none !important;
          }

          ::v-deep .anchorBL {
            display: none !important;
          }
        }
      }
    }
  }
}
</style>
